<template>
    <!-- 输入内容 @事件监听后面可以直接跟着修饰符，在什么情况下操作-->
    <section class="real-app">
        <input type="text"
                class="add-input"
                autofocus="autofpcus"
                placeholder="接下来要做什么"
                @keyup.enter="addTodo">
        <Item 
        :todo="todo"
        v-for="todo in todos"
        :key="todo.id"
        @del = "deleteTodo"
        />
        <tabs :filter="filter" :todos="todos"/>
    </section>
</template>
<script>
    import Item from './itme.vue'
    import Tabs from './tabs.vue'
    let id =0;
    export default{
        data() {
            return{
                todos:[],
                filter:'all'
            }
        },
        components:{
            Item,
            Tabs
        },
        methods:{
            addTodo(e){
                this.todos.unshift({
                    id:id++,
                    content:e.target.value.trim(),
                    completed:false
                })
                e.target.value = ''
            },
            //解耦父组件传递过来的内容，找到this的todos这个数据内容，删除（splice）参数是找到对应的id相同的数据进行删除
            deleteTodo(id){
                this.todos.splice(this.todos.findIndex(todo => todo.id==id),1)
            }
        }
        
    }
</script>
<style lang="stylus" scoped>
.real-app
    width 600px
    margin 0 auto
    box-shadow 0 0 5px #666
.add-input
    position relative
    margin 0
    width 100%
    font-size 24px
    font-family inherit
    font-weight inherit 
    line-height 1.4em
    border none
    outline none 
    color inherit 
    box-sizing border-box
    font-smoothing antialiased
    padding 16px 16px 16px 36px
    border none
    box-shadow inset 0 -2px 1px rgba(0, 0, 0, 0.03)
</style>